const lineChart = () => {
    let myChart = echarts.init(document.querySelector('#line'))
    let option = {
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisLabel: {
          color: '#999'
        },
        axisLine: {
          lineStyle: {
            color: '#ccc',
            type: 'dashed'
          }
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      title: {
        text: '2022全学科薪资走势',
        top: 15,
        left: 10,
        textStyle: {
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'axis' // 表示鼠标放到轴上即可触发
      },
      grid: {
        top: '20%'
      },
      series: [
        {
          data: [9000, 12000, 11000, 22000, 12000, 15000, 11000, 11000, 17000, 18000, 13000, 19000],
          type: 'line', // line表示折线图，bar表示柱状图，pie表示饼图
          smooth: true, // 表示使用平滑曲线
          lineStyle: {
            width: 6 // 线条粗细
          },
          symbolSize: 10, // 拐点处的标记大小
          areaStyle: {
            color: {
              type: 'linear', // 表示线性渐变
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#499FEE' // 0% 处的颜色
                },
                {
                  offset: 0.8,
                  color: 'rgba(255,255,255,0.2)'
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255,0)' // 100% 处的颜色
                }
              ],
              global: false 
            }
          }
        }
      ],
      color: {
        type: 'linear', // 表示线性渐变
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#499FEE' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#5D75F0' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false。一般都不需要修改。（如果是true，则哪些数字0/1等等表示真实的像素值了）
      }
    }
    myChart.setOption(option) // setOption 中第1个O是大写的
  }
  lineChart()
  // ------------------------------ 饼图 - 班级薪资分布 ---------------------------
const classSalaryChart = () => {
    let myChart = echarts.init(document.querySelector('#salary'))
    let option = {
      title: {
        text: '班级薪资分布',
        left: 10, // 10 表示10px
        top: 15,
        textStyle: {
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        bottom: '6%',
        left: 'center'
      },
      color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
      series: [
        {
          name: '班级薪资分布', // 这个名字会显示在 提示框中
          type: 'pie', // 表示饼图
          radius: ['50%', '64%'], // 内外圈的半径
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1999, name: '1万以下' },
            { value: 999, name: '1万-2万' },
            { value: 99, name: '1.5万-2万' },
            { value: 19, name: '2万以上' }
          ]
        }
      ]
    }
    myChart.setOption(option)
  }
  classSalaryChart()
const sexSalaryChart = () => {
    let myChart = echarts.init(document.querySelector('#gender'))
    let option = {
      title: [
        {
          text: '男女薪资分布',
          left: 10, // 10 表示10px
          top: 10,
          textStyle: {
            fontSize: 16
          }
        },
        {
          text: '男生',
          left: '45%', // 10 表示10px
          top: '45%',
          textStyle: {
            fontSize: 12
          }
        },
        {
          text: '女生',
          left: '45%', // 10 表示10px
          top: '85%',
          textStyle: {
            fontSize: 12
          }
        }
      ],
      tooltip: {
        trigger: 'item'
      },
      color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
      series: [
        {
          name: '男生薪资分布', // 这个名字会显示在 提示框中
          type: 'pie', // 表示饼图
          center: ['50%', '30%'], // 圆心点坐标
          radius: ['20%', '30%'], // 内外圈的半径
          data: [
            { value: 1048, name: '1万以下' },
            { value: 235, name: '1万-2万' },
            { value: 580, name: '1.5万-2万' },
            { value: 484, name: '2万以上' }
          ]
        },
        {
          name: '男生薪资分布', // 这个名字会显示在 提示框中
          type: 'pie', // 表示饼图
          center: ['50%', '70%'], // 圆心点坐标
          radius: ['20%', '30%'], // 内外圈的半径
          data: [
            { value: 1048, name: '1万以下' },
            { value: 235, name: '1万-2万' },
            { value: 580, name: '1.5万-2万' },
            { value: 484, name: '2万以上' }
          ]
        }
      ]
    }
    myChart.setOption(option)
  }
  sexSalaryChart()
const groupSalaryChart = () => {
    let myChart = echarts.init(document.querySelector('#lines'))
    let option = {
      xAxis: {
        type: 'category',
        data: ['张三', '李四', '赵云', '张飞', '马超', '黄忠', '二爷', '瞎子'],
        axisLabel: {
          color: '#999'
        },
        axisLine: {
          lineStyle: {
            color: '#ccc',
            type: 'dashed'
          }
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      series: [
        {
          data: [13200, 17789, 13123, 14564, 23210, 21230, 14560, 13410],
          type: 'bar',
          name: '期望薪资'
        },
        {
          data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
          type: 'bar',
          name: '实际薪资'
        }
      ],
      tooltip: {},
      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#34D39A' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#499FEE' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      ],
      grid: {
        top: 30,
        bottom: 50,
        left: 70,
        right: 30
      }
    }
    myChart.setOption(option)
  }
  groupSalaryChart()